<template>
    <div class="nodes" @click="foldSubnodesOnClk">
      <Node v-for="(node, index) in nodes" :key="index" :node="node" @add-subnodes="addSubnodes" @add-subseq-node="addSubseqNode" @remove-node="removeNode" @move-backward="moveBackward" @move-forward="moveForward" @move-subnodes-backward="moveSubnodesBackward" @move-subnodes-forward="moveSubnodesForward" />
    </div>
  </template>
  
  <script>
  import Node from './Node.vue';
  
  export default {
    components: {
      Node
    },
    data() {
      return {
        nodes: [
          {
            title: 'Title',
            items: [{ name: 'Item' }],
            subnodes: [],
            crclChecked: false,
            menuChecked: false,
            subnodesChecked: false
          }
        ]
      };
    },
    methods: {
      addSubnodes(node) {
        node.subnodes.push({
          title: 'Title',
          items: [{ name: 'Item' }],
          subnodes: [],
          crclChecked: false,
          menuChecked: false,
          subnodesChecked: false
        });
      },
      addSubseqNode(node) {
        const index = this.nodes.indexOf(node);
        this.nodes.splice(index + 1, 0, {
          title: 'Title',
          items: [{ name: 'Item' }],
          subnodes: [],
          crclChecked: false,
          menuChecked: false,
          subnodesChecked: false
        });
      },
      removeNode(node) {
        const index = this.nodes.indexOf(node);
        if (this.nodes.length > 1) {
          this.nodes.splice(index, 1);
        }
      },
      moveBackward(node) {
        const index = this.nodes.indexOf(node);
        if (index > 0) {
          this.nodes.splice(index - 1, 0, this.nodes.splice(index, 1)[0]);
        }
      },
      moveForward(node) {
        const index = this.nodes.indexOf(node);
        if (index < this.nodes.length - 1) {
          this.nodes.splice(index + 1, 0, this.nodes.splice(index, 1)[0]);
        }
      },
      moveSubnodesBackward(subnodes) {
        const index = this.nodes.indexOf(subnodes);
        if (index > 0) {
          this.nodes.splice(index - 1, 0, this.nodes.splice(index, 1)[0]);
        }
      },
      moveSubnodesForward(subnodes) {
        const index = this.nodes.indexOf(subnodes);
        if (index < this.nodes.length - 1) {
          this.nodes.splice(index + 1, 0, this.nodes.splice(index, 1)[0]);
        }
      },
      foldSubnodesOnClk(event) {
        const tgtType = event.target.type;
        const tgtClass = event.target.getAttribute('class');
        const tgtParentClass = event.target.parentNode.getAttribute('class');
        const tgtGrandParentClass = event.target.parentNode.parentNode.getAttribute('class');
  
        if (tgtClass !== 'crcl' && tgtClass !== 'chkCrcl' && tgtClass !== 'dot' && tgtClass !== 'chkSubnodes' && tgtType !== 'text') {
          if (tgtParentClass !== 'btns' && tgtGrandParentClass !== 'btns') {
            this.nodes.forEach(node => {
              node.crclChecked = false;
              node.menuChecked = false;
              node.subnodesChecked = false;
            });
          }
        }
      }
    }
  };
  </script>
  
  <style scoped>
  /* 组件特定样式 */
  </style>